<!--
 * @Author: GKN
 * @Date: 2024-03-25 16:37:54
 * @LastEditTime: 2024-03-25 17:06:05
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\specialSubject\s4\index.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="main mainPadding">
    <div style="padding: 20px 0">
        <el-breadcrumb separator=">">
            <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" class="cursor-p" :key="i" @click="go(i,item)">{{ item.name }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-row :gutter="20">
        <el-col :span="16">
            <el-row :gutter="20">
                <el-col :span="8" v-for="(item,i) in list1" :key="i">
                    <imgView :src="item.thumb" style="height: 150px;" />
                    <div style="height: 88px;">
                        <div class="title-16-left font-text-al-l omit cursor-p" style="margin-top: 26px;">{{ item.name }}</div>
                        <div class="font-content font-text-al-l omit-2 cursor-p" style="margin-top:14px;">{{ item.blurb }}</div>
                    </div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="8">
            <Card1 title="聚焦" :more="false">
                <template v-slot:main1>
                    <div style="margin-top: 10px;height: ;padding-bottom: 10px;">
                        <el-row :gutter="20"  v-for="(item,i) in list2" :key="i" style="margin-bottom: 20px;">
                            <el-col :span="12" style="height: 100px;">
                                <imgView src="" style="height: 100px"></imgView>
                            </el-col>
                            <el-col :span="12" style="height: 100px;">
                                <div style="height: 100%;padding: 20px 10px;">
                                    <div class="title-16-left font-text-al-l omit-2 cursor-p">1111111111111122222222222222221</div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </template>
            </Card1>
            <Card1 title="热文排行" :more="false" style="margin-top: 20px;">
                <template v-slot:main1>
                    <div style="margin-top: 10px;height: ;padding-bottom: 10px;">
                        <div v-for="(item,i) in list3" :key="i" style="height: 100%;padding: 10px 10px;margin-bottom: 20px;" class="flex cursor-p"> 
                            <el-col :span="2"><div class="bjview" style="text-align:center;">{{ i+1 }}</div></el-col>
                            <el-col :span="22"><div class="omit font-text-al-l">{{ item.name }}</div></el-col>
                        </div>
                    </div>
                </template>
            </Card1>
        </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref,reactive, onMounted,getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from 'crypto-js';
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import Card1 from '@/view/components/card1.vue';
// -----------------------------------------------------------------
const breadcrumb_list = [{name:'现代企业网'},{name:'专题'},{name:'特写'}]
const list1 = ref([])
const getlist1=()=>{
    list1.value = [
        {thumb:'2024-01-12_雷让岐.jpeg',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {name:'111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'2024-01-12_雷让岐.jpeg',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'2024-01-12_雷让岐.jpeg',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {name:'111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'}
    ]
}
getlist1()
const list2 = ref([])
const getlist2=()=>{
    list2.value = [
        {thumb:'https://k.sinaimg.cn/n/sinakd20240323ac/167/w600h367/20240323/d6d1-dd560f9a15d57da2abd2ca0a1bdcd621.jpg/w700d1q75cms.jpg',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'}
    ]
}
getlist2()
const list3 = ref([])
const getlist3=()=>{
    list3.value = [
        {thumb:'https://k.sinaimg.cn/n/sinakd20240323ac/167/w600h367/20240323/d6d1-dd560f9a15d57da2abd2ca0a1bdcd621.jpg/w700d1q75cms.jpg',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'},
        {thumb:'',name:'1111111111111111111111111111111111111111111',blurb:'222222222222222222222222222222222222222222'}
    ]
}
getlist3()
</script>

<style lang='less' scoped>
.bjview{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        color: #fff;
        font-size: 8px;
        line-height: 20px;
        background: #d10b00;
    }
</style>

